<div class="page-header">
    <h1 class="page-title">系统概览</h1>
</div>

<div class="row">
    <div class="col-md-3">
        <div class="dashboard-card">
            <h3 class="dashboard-card-title">总客户数</h3>
            <div class="dashboard-card-value">
                <i class="fas fa-users text-primary"></i>
                <span id="totalCustomers">0</span>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="dashboard-card">
            <h3 class="dashboard-card-title">总电表数</h3>
            <div class="dashboard-card-value">
                <i class="fas fa-tachometer-alt text-success"></i>
                <span id="totalMeters">0</span>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="dashboard-card">
            <h3 class="dashboard-card-title">待抄表数</h3>
            <div class="dashboard-card-value">
                <i class="fas fa-clipboard-list text-warning"></i>
                <span id="pendingReadings">0</span>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="dashboard-card">
            <h3 class="dashboard-card-title">本月抄表数</h3>
            <div class="dashboard-card-value">
                <i class="fas fa-chart-line text-info"></i>
                <span id="monthlyReadings">0</span>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-md-6">
        <div class="dashboard-card">
            <h3>最近抄表记录</h3>
            <table class="table table-sm">
                <thead>
                    <tr>
                        <th>电表号</th>
                        <th>客户</th>
                        <th>读数</th>
                        <th>日期</th>
                    </tr>
                </thead>
                <tbody id="recentReadings">
                    <!-- 数据将通过JavaScript动态加载 -->
                </tbody>
            </table>
        </div>
    </div>
    <div class="col-md-6">
        <div class="dashboard-card">
            <h3>用电类型分布</h3>
            <canvas id="customerTypeChart"></canvas>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-md-12">
        <div class="dashboard-card">
            <h3>月度用电量趋势</h3>
            <canvas id="monthlyConsumptionChart"></canvas>
        </div>
    </div>
</div> 